import G6Editor from "@antv/g6-editor";
import { Row, Button } from "ant-design-vue";
import { defineComponent, PropType,reactive,ref } from "vue";
import "./index.less";

interface ToolbarType {
  lable: string;
  command: string;
  icon: string;
}
const toolbars: ToolbarType[] = [
  {
    lable: "撤销",
    command: "undo",
    icon: "flow-undo",
  },
  {
    lable: "重做",
    command: "redo",
    icon: "flow-redo",
  },
  {
    lable: "复制",
    command: "copy",
    icon: "flow-copy",
  },
  {
    lable: "粘贴",
    command: "paste",
    icon: "flow-paste",
  },
  {
    lable: "删除",
    command: "delete",
    icon: "flow-remove",
  },
  {
    lable: "放大",
    command: "zoomIn",
    icon: "flow-zoomin",
  },
  {
    lable: "缩小",
    command: "zoomOut",
    icon: "flow-zoomout",
  },
  {
    lable: "自适应尺寸",
    command: "autoZoom",
    icon: "flow-fit",
  },
  {
    lable: "实际尺寸",
    command: "resetZoom",
    icon: "flow-actual",
  },
  {
    lable: "清空画布",
    command: "clear",
    icon: "flow-clear",
  },
];

export default defineComponent({
  name: "XToobarPannel",
  props: {
    editor: {
      type: Object as PropType<G6Editor>,
      required: true,
    },
    onSave: Function,
  },
  setup(prop, ctx) {
    const toolbarItems:ToolbarType[] = reactive(toolbars)

    function command(cmd: string, evt: Event) {
      evt.preventDefault();
      evt.stopPropagation();
      prop.editor.executeCommand(cmd);
      if (cmd === "clear") {
        ctx.emit("deleteItem");
      }
      if (cmd === "delete") {
        ctx.emit("deleteItem");
      }
    }
    function save(evt: Event) {
      evt.preventDefault();
      evt.stopPropagation();
      ctx.emit("save",'abc');
    }

    return () => (
      <Row>
        {toolbarItems.map((x) => (
          <i
            title={x.lable}
            class="flow-iconfont"
            onClick={(e) => {command(x.command, e)}}
          >
            <svg-icon size={27} icon-class={x.icon}/>
          </i>
        ))}
        <span class="save">
          <Button type="primary" style={{marginLeft:'50px'}} size="small" onClick={save}>
            保存
          </Button>
        </span>
      </Row>
    );
  },
  emits: ["save", "deleteItem"],
});
